<template>
  <view class="flex-col page">
    <view class="flex-col justify-between flex-auto group_2">
      <view class="flex-col  group_1">
		<text class="text_1">{{equipname}}</text>
		<!-- <text class="text_2">快来和朋友一起共享设备吧！</text> -->
      </view>
	 <view class="flex-col  group_2">
	  		<text class="text_2">快来和朋友一起共享设备吧！</text>
	  </view>
	  <view class="flex-col  group_3" >
	   		<input class="font_1" name="phoneaccount" v-model="phoneaccount" placeholder="请输入手机号"   @input="clearInput"/>
			<text class="uni-icon" v-if="showClearIcon" @click="clearIcon"></text>
	   </view>
	   <!-- <view class="flex-col justify-start items-center group_4" @click="navTo('/pages/sharingequipinfo/sharingequipinfo')"> -->
	    <view class="flex-col justify-start items-center group_4" @click="add()"> 
		 <view class="flex-col justify-start items-center button">
	   			<!-- <text class="font_2 text_8" @click="sharingothers()">确定</text> -->
				<text class="font_2 text_8" >确定</text>
	   	</view>
	   </view>
    </view>
  </view>
</template>

<script>
  //绑定人对某设备发出对某用户的共享邀请
  import {_sharinginvite} from "@/service/sharingequip.js"
  // import {connectSocketInit} from '@/App.vue';
  // import { onMounted, onUnmounted } from '@/App.vue';
  export default {
	  
    components: { },
    data() {
      return {
		  showClearIcon: false,
	      inputClearValue: '',
		  equipname:'',
		  phoneaccount:'',
		  serialnum:'',
		  productlist:[],
		  account:'',
		  
		  socketTask: null,
		  // 确保websocket是打开状态
		  is_open_socket: false,
		  
		  sharemsg:''
	  };
    },
	
	onLoad(options) {

	 const name_equip=options.name_equip
	 console.log(name_equip)
	 this.equipname=name_equip
	 this.serialnum=options.serialnum_equip
	 
	 try {
	 	const value = uni.getStorageSync('sharingequip2');
	 	if (value) {
	 		console.log(value);
	 		this.equipname=value.name;
	 		this.serialnum =value.serialnum;
	 	}
	 } catch (e) {
	 	console.error(e);
	 }
	 
	 try {
	 	const value = uni.getStorageSync('userInfo');
	 	console.log(value)
	 	if (value != null) {
	 		this.account = value.accountNum
	 		console.log(this.account)
	 	}
	 } catch (e) {
	 	console.error(e);
	 }
	},
	// onLoad() {
	// 	try {
	// 		const value = uni.getStorageSync('sharingequip2');
	// 		if (value) {
	// 			console.log(value);
	// 			this.equipname=value.name;
	// 			this.serialnum =value.serialnum;
	// 		}
	// 	} catch (e) {
	// 		console.error(e);
	// 	}
		
	// 	try {
	// 		const value = uni.getStorageSync('userInfo');
	// 		console.log(value)
	// 		if (value != null) {
	// 			this.account = value.accountNum
	// 			console.log(this.account)
	// 		}
	// 	} catch (e) {
	// 		console.error(e);
	// 	}
		
	// },
	created() {
		this.connectSocketInit()
	},
    methods: {
		// 跳转链接
		navTo(url) {
			uni.navigateTo({
				url
			});
		},

		clearInput: function(event) {
		    this.inputClearValue = event.detail.value;
		    if (event.detail.value.length > 0) {
		        this.showClearIcon = true;
		    } else {
		        this.showClearIcon = false;
		    }
		},

		sendRequest() {
		  const data = {
		    sender: this.account,
		    receiver: this.phoneaccount,
		    // equipname: this.equipname,
		    serialnum: this.serialnum,
			status:'INVITEDSHARE'
		  };
		
		  if (this.is_open_socket) {
		    this.socketTask.send({
		      data: JSON.stringify(data), // 将对象转换为字符串发送
		      async success() {
				  console.log(data)
		        console.log("消息发送成功");
		      },
		    });
		  }
		},
		
		// 验证手机号是否为空
		validRoom(phoneaccount) {
			let valid = false;
			let rule = /^1[3456789]\d{9}$/;
			if (phoneaccount === '') {
				this.$api.msg('手机号码不能为空');
			} else if (!rule.test(phoneaccount)) {
				this.$api.msg('请输入正确的手机号码');
			} else {
				valid = true;
			}
			return valid;
		},
		issame(phoneaccount){
			let valid=false;
			if(phoneaccount===this.account){
				this.$api.msg('无需共享给本机号码')
			}else{
				valid=true;
			}
			return valid;
		},
		connectSocketInit() {
			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
			this.socketTask = uni.connectSocket({
				url: 'ws://43.142.102.167:8088/woonsocket/'+this.account,
				success(data) {
					console.log("websocket连接成功");
				},
			});
			this.socketTask.onOpen((res) => {
				console.log(" WebSocket连接正常打开中...！");
				this.is_open_socket = true;
			});
			
		    this.socketTask.onMessage((res) => {
				console.log("收到服务器内容：");
				console.log(res.data);
				this.$api.msg(res.data)
				this.sharemsg=res.data
			});
			
		    this.socketTask.onClose(() => {
				console.log("WebSocket已经被关闭了");
				this.is_open_socket = false;
			});
		},
		
		transharemsg(){
			uni.setStorage({
				key:'sharingmsg',
				data:this.sharemsg
			})
		},
		
		add(){
			if(this.validRoom(this.phoneaccount)&&this.issame(this.phoneaccount)){
				this.addsharing()
				const data = {
				    phoneaccount: this.phoneaccount,
				    serialnum: this.serialnum
				};
				console.log(data)
				uni.setStorage({
					key: 'invitesharing',
					data: data,
				})
				this.sendRequest()
			}
		},
			
		async addsharing(){
			console.log(this.phoneaccount)
			console.log(this.serialnum)
			let data={
				serialnum_sharingequip:this.serialnum,
				account_sharingequip:this.phoneaccount
			}
			let res = await _sharinginvite(data);
			console.log(res);
			if (res.flag==true) {
			  setTimeout(() => {
				this.$api.msg('您已发出对该用户的共享邀请，请耐心等待用户同意');
			  }, 200);
			} else {
			  setTimeout(() => {
			    this.$api.msg('您已发出对该用户的共享邀请，请勿重复发送');
			  }, 200);
			}
		}
	},
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group_1 {
      overflow-y: auto;
	  padding: 150.5rpx 8.33rpx 6.5rpx ;
	  .text_1{
		font-size: 40rpx;
		font-family: SourceHanSansCN;
		line-height: 40rpx;
		// flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	  }  
    }
	.group_2 {
	  overflow-y: auto;
	  .text_2{
	  		font-size: 35rpx;
	  		font-family: SourceHanSansCN;
	  		line-height: 35rpx;
			color: 	#696969;
			margin-left:180rpx;
			margin-top: 50rpx;
	  }  
	}
	.group_3 {
	  overflow-y: auto;
	  padding: 33.33rpx 35rpx;
	  background-color: #F0F0F0;
	  border-radius: 25rpx;
	  margin-left:50rpx;
	  margin-top: 30rpx;
	  width: 660rpx;
	  .uni-icon{
		    position: absolute;
			//background-image: url(../../static/images/删除.png);
	  		background-repeat: no-repeat;
	  		background-size: cover;
	  		width: 40rpx;
	  		height: 38rpx;
	  		margin-left: 520rpx;
			margin-top: 5rpx;
	  }
	}
	.group_4{
		padding: 650rpx 340.17rpx;
		.button {
		  padding: 25rpx 0;
		  background-color: #138f87;
		  border-radius: 56.25rpx;
		  width: 650rpx;
		  .text_8 {
		    color: #ffffff;
		  }
		}
	}
  }
</style>